import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../actions/index'
import 'antd/dist/antd.css'
import { Drawer, Button } from 'antd'

class Antd extends Component {

    state = {
        visible: false,
        visible2: false,
        Name: '',
        Age: '',
        Addredd: '',
        id: '',
        cha: ''
    }

    componentDidMount() {
        if(!this.props.antdList || !this.props.antdList.length){
            this.props.antd_List()
        }
    }

    //编辑按钮
    showDrawer(item) {
        this.setState({
            visible: true,
        })
        console.log(item)
        this.setState({
            Name: item.title,
            Age: item.age,
            Addredd: item.word,
            id: item.id
        })
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    //查询按钮
    showDrawer2 = () => {
        this.setState({
            visible2: true,
        });
    };

    onClose2 = () => {
        this.setState({
            visible2: false,
        });
    }

    //删除
    deteleItem(index) {
        this.props.detele_Item(index)
    }

    //受控组件
    changeData(name, value) {
        this.setState({
            [name]: value
        })
    }

    //保存
    saveBtn() {
        let obj = {
            Name: this.state.Name,
            Age: this.state.Age,
            Addredd: this.state.Addredd,
            id: this.state.id
        }

        this.props.save_Btn(obj)
    }

    //查询 模糊搜索
    Inquire() {
        this.props.Inquire(this.state.cha)
        // if(this.state.cha = '') {
        //     this.props.Inquires()
        // }
    }

    //全选
    allFlag() {
        this.props.all_Flag()
    }

    //单选
    clickFlag(index) {
        this.props.click_Flag(index)
    }

    render() {
        let { antdList, allFlag } = this.props
        let { Name, Age, Addredd, cha } = this.state
        return (
            <div className="site-drawer-render-in-current-wrapper">
                <ul className='dh'>
                    <li><input type='checkbox' checked={allFlag} onChange={
                        this.allFlag.bind(this)
                    }/>Name</li>
                    <li>Age</li>
                    <li>Addredd</li>
                </ul>
                <div>
                    <Button type="primary" onClick={this.showDrawer2} style={{ margin: '0 15px' }}>
                        查找
                    </Button>
                    <Drawer
                        placement="left"
                        closable={false}
                        onClose={this.onClose2}
                        visible={this.state.visible2}
                        getContainer={false}
                        style={{ position: 'absolute' }}
                    >
                        <input value={cha} onChange={e => {this.changeData('cha', e.target.value)}} />
                        <button onClick={
                            this.Inquire.bind(this)
                        }>查询</button>
                    </Drawer>
                </div>

                <ul className='list'>
                    {
                        antdList && antdList.length ? antdList.map((item, index) => {
                            return (
                                <li key={index}>
                                    <span><input type='checkbox' checked={item.flag} onChange={
                                        this.clickFlag.bind(this,index)
                                    } />{item.title}</span>
                                    <span>{item.age}</span>
                                    <span>
                                        {item.word}
                                        <Button type="primary" onClick={this.showDrawer.bind(this, item)} style={{ margin: '0 15px' }}>
                                            编辑
                                        </Button>
                                        <Button onClick={
                                            this.deteleItem.bind(this, index)
                                        }>删除</Button>
                                    </span>
                                </li>
                            )
                        }) : <div>暂无数据</div>
                    }
                </ul>
                <Drawer
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    getContainer={false}
                    style={{ position: 'absolute' }}
                >
                    <p>
                        Name：<input value={Name} onChange={e => { this.changeData('Name', e.target.value) }} />
                    </p>
                    <p>
                        Age：<input value={Age} onChange={e => { this.changeData('Age', e.target.value) }} />
                    </p>
                    <p>
                        Addredd：<input value={Addredd} onChange={e => { this.changeData('Addredd', e.target.value) }} />
                    </p>
                    <button onClick={
                        this.saveBtn.bind(this)
                    }>确定</button>
                    <button>取消</button>
                </Drawer>
            </div>
        )
    }
}

let mapStateToProps = ({ antdReducer }) => {
    return {
        ...antdReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Antd)